<template>
  <el-card
    ><div class="course-main">
      <div class="course-header">
        <div class="course-photo">
          <img :src="info.expertFace" />
        </div>
        <div>{{ info.expertName }}</div>
        <div class="course-title">{{ info.seriesName }}</div>
        <div class="course-column">课程目录</div>
      </div>
      <div class="course-content">
        <div class="course-left">
          <div class="course-subtitle">当前播放：{{ playInfo.courseName }}</div>
          <video
            v-if="videoShow && playInfo.type == 'logo-youtube'"
            ref="myVideo"
            autoplay
            :src="playInfo.sourcePath"
            controls
          ></video>
          <div
            v-else-if="playInfo.type == 'ios-musical-notes'"
            @click="playAudio"
            class="audio-box "
          >
            <!--    <Icon type="ios-musical-notes" /> -->
            <audio ref="myAudio" :src="playInfo.sourcePath" autoplay controls />
          </div>
          <div v-else class="i_box">
            <iframe
        id="iframe1"  frameborder='no' border='0' marginwidth='0' marginheight='0' scrolling='no' allowtransparency='yes'


              ref="myAudio"
              :src="playInfo.sourcePath"
            
            ></iframe>
          </div>
        </div>
        <div class="course-right">
          <div
            v-for="(i, index) in courseList"
            :key="index"
            class="course-study"
            :class="{ currentVideo: i.id == playInfo.id }"
            @click="playVideo(i)"
          >
            <div>{{ (index + 1) | sortOrder }}</div>
            <div>
              <div>{{ i.courseName }}</div>
              <div class="f-row ai-c">
                <img
                  :src="
                    i.type == 'logo-youtube'
                      ? videoSrc
                      : i.type == 'ios-musical-notes'
                      ? audioSrc
                      : imgSrc
                  "
                  alt=""
                />
                <div>
                  {{ i.fileName }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div></el-card
  >
</template>
<script>
import { curriculum_course, getCourseInfoById } from "@/request/api";
export default {
  data() {
    return {
      imgSrc: require("@/assets/images/others/course-img.png"),
      audioSrc: require("@/assets/images/others/course-audio.png"),
      videoSrc: require("@/assets/images/others/course-video.png"),
      info: {
        // 课程信息
        seriesName: null,
        expertFace: null,
        expertName: null,
      },
      courseList: [], // 课程目录
      playInfo: {}, //当前播放
      videoShow: false, //视频显示
    };
  },
  filters: {
    sortOrder(val) {
      return val >= 10 ? val : "0" + val;
    },
    formatTime(val) {
      let s = parseInt(val);
      var m = 0;
      var h = 0;
      if (s > 60) {
        m = parseInt(s / 60);
        s = parseInt(s % 60);
        if (m > 60) {
          h = parseInt(m / 60);
          m = parseInt(m % 60);
        }
      }
      var res = parseInt(s) + "秒";
      if (m > 0) {
        res = parseInt(m) + "分" + res;
      }
      if (h > 0) {
        res = parseInt(h) + "小时" + res;
      }
      return res;
    },
  },
  mounted() {
    let id = this.$route.query.id;
    let current = this.$route.query.current;
    this.init(id, current);
  },
  methods: {
    // 初始化表单
    init(id = null, current) {
      if (id) {
        this.getDetailInfo(id);
        this.getDetailList(id, current);
      } else {
        this.$Message.error("缺少课程ID");
      }
    },
    // 播放视频
    playVideo(row) {
      console.log(row, 1999);
      if (row.id != this.playInfo.id) {
        this.playInfo = Object.assign({}, row);
        if (row.type == "logo-youtube") {
          this.videoShow = false;
          this.$nextTick(() => {
            this.videoShow = true;
            setTimeout(() => {
              this.$refs.myVideo.play();
            }, 300);
          });
        }
        if (row.type == "ios-musical-notes") {
          this.$nextTick(() => {
            console.log(this.$refs.myAudio);
            this.$refs.myAudio.play();
          });
        }
      }
    },
    // 播放音频
    playAudio() {
      let audio = this.$refs.myAudio;
      if (audio.paused) {
        audio.play();
      } else {
        audio.pause();
      }
    },
    // 获取课程列表
    getDetailList(id, current) {
      curriculum_course(id).then((res) => {
        if (res.success) {
          res.result.forEach((i) => {
            if (i.sourcePath.lastIndexOf(".mp4") != -1) {
              i.type = "logo-youtube";
            } else if (i.sourcePath.lastIndexOf(".mp3") != -1) {
              i.type = "ios-musical-notes";
            } else {
              i.type = "md-image";
            }
            if (i.id == current) this.playVideo(i);
          });
          this.courseList = res.result;
        }
      });
    },
    // 获取课程信息
    getDetailInfo(id) {
      getCourseInfoById(id).then((res) => {
        if (res.success) {
          res.result.categoryList = res.result.categoryStr.split(" ");
          this.info = res.result;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.i_box{
    width: 100%!important;
    height: 100%!important;
    iframe{
         width: 100%!important;
    height: 100%!important;
    }
}
.el-card {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.course-page {
  min-height: calc(100vh - 80px);
}
.course-main {
  padding: 0px;
  .course-header {
    background: #fff;
    height: 5.625rem;
    display: flex;
    .course-photo {
      width: 1.6875rem;
      height: 1.6875rem;
      vertical-align: middle;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    div {
      margin: auto 0.625rem;
      font-size: 14px;
      vertical-align: middle;
    }
    .course-title {
      flex: 1;
      font-size: 1.625rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
    }
    .course-column {
      width: 25rem;
      text-align: center;
      margin: 0;
      line-height: 5.625rem;
      color: #666666;
      font-weight: 600;
      background-color: #f5f7fa;
    }
  }
  .course-content {
    height: 32rem;
    display: flex;
    .course-left {
      flex: 1;
      background-color: #000000;
      position: relative;
      .course-subtitle {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        font-size: 0.875rem;
        font-weight: 500;
        color: #ffffff;
        line-height: 2.5rem;
        padding: 0 2.5rem;
        background-color: rgba(0, 0, 0, 0.5);
      }
      video {
        width: 100%;
        height: 100%;
        background-color: #1b1b1b;
      }
      .audio-box {
        width: 100%;
        height: 100%;
        position: relative;

        audio {
          width: 100%;
          height: 100%;
          background-color: #1b1b1b;
        }
      }
    }
    .course-right {
      img {
        width: 2rem;
        height: 2rem;
        vertical-align: middle;
      }
      width: 25rem;
      background-color: #343434;
      .course-study {
        margin: 0.625rem;
        padding: 0.625rem;
        border-bottom: 0.0625rem solid #4c4c4c;
        display: flex;
        font-family: PingFang SC;
        color: #ffffff;
        &:hover {
          cursor: pointer;
          background-color: #2e2e2e;
        }
        > div {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        > div:first-child {
          width: 3.125rem;
          font-weight: bold;
        }
        > div:nth-child(2) {
          flex: 1;
          span {
            margin: 0 0.625rem 0 0.3125rem;
          }
          > div:first-child {
            font-weight: 500;
          }
          > div:last-child {
            font-weight: 500;
            font-size: 0.75rem;
          }
        }
        > div:last-child {
          margin: auto;
        }
      }
      .currentVideo {
        background-color: #1b1b1b;
      }
    }
  }
}
</style>
